<template>
  <div class="column q-pa-sm golden-layout-panel fit">
    <div class="column col">
      <div class="row no-wrap q-mb-sm">
        <q-chip outline>All</q-chip>
        <q-chip outline>By Creator</q-chip>
        <q-chip outline>Related</q-chip>
        <q-chip outline>Digital Painting</q-chip>
      </div>
      <div class="column col fit">
        <q-scroll-area class="fit">
          <q-list class="q-gutter-y-sm">
            <video-list-item
              v-for="video in videos"
              :key="video.id"
              :video="video"
            />
          </q-list>
        </q-scroll-area>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import VideoListItem from 'components/video/VideoListItem.vue';
import { useRoute } from 'vue-router';
import { useVideoStore } from 'src/stores/video-store.js';
const videoStore = useVideoStore();
const route = useRoute();
const videos = computed(() => videoStore.currentReltedVideos);
onMounted(async () => {
  const id = route.params.id;
  await videoStore.getCurrentReltedVideos(id as string);
});
</script>
